<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>局部组件</title>

</head>
<body>

    <div id="app">

        <heima></heima>

        <em></em>
    </div>


<script src="./node_modules/vue/dist/vue.js"></script>
<script>
    //局部组件在声明时并不知道自己是个组件,注册完成之后才知道
    var heima = {
        template:`
            <button @click="age++">我是heima组件中的按钮,{{name}},age:{{age}}</button>
        `,
        data() {
            return {
                name:"局部组件",
                age:10
            };
        }
    }

    //局部组件使用时必须进行注册
    var app = new Vue({
        el: "#app",
        components:{
            heima
        }
    });
</script>


</body>
</html>